<!--
 * @Author: your name
 * @Date: 2021-06-26 13:21:35
 * @LastEditTime: 2023-11-02 11:45:42
 * @LastEditors: pmy
 * @Description: 下发车辆树
 * @FilePath: \bdcar-net\src\views\comlbs\orderConfiguration\instructSelectTree.vue
-->
<template>
  <div>
    <div style="height: 32px">
      <el-input placeholder="输入关键字进行过滤" clearable v-model="filterText" prefix-icon="Search"
        style="margin-bottom:10px; width:calc(100% - 30px);"></el-input>
      <el-icon class="refresh-btn my-refresh" @click="refreshTree">
        <RefreshRight />
      </el-icon>
    </div>
    <div class="body">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-tree-v2 :data="treeList" :default-expanded-keys="expandedkeys" class="my-tree" ref="myTree"
            :show-checkbox="true" :filter-method="filterNode" :height="height">
            <template #default="{ data }">
              <div class="my-tree-node">
                <div v-if="data.type >= 0 && data.type != 2" class="node-icon">
                  <svg-icon :icon-class="getNodeImg(data)" />
                </div>
                <!-- onlineStatus 0:行驶 1:停留 2:熄火 3:定位失败 4:离线 5:未定位 6:在线 -->
                <span v-else-if="data.type == 2"
                  :class="{ online: (data.onlineStatus != 5 && data.onlineStatus != 4), offline: (data.onlineStatus == 5 || data.onlineStatus == 4) }"></span>
                <div class="node-text overflow-text" :title="getText(data)">{{ getText(data) }}</div>
              </div>
            </template>
          </el-tree-v2>
        </template>
      </el-auto-resizer>
    </div>
  </div>
</template>
<script>
import { useData } from "../../../api/tree"
import { ref } from "vue"
export default {
  name: "instructSelectTree",
  props: {
    treeList: {
      typeof: Array
    },
    refreshRightTree: {
      type: Function,
      default: () => { }
    },
  },
  setup() {
    const defaultProps = ref({
      children: 'children',
      label: 'label',
      isLeaf: 'hasChildren'
    });
    const filterText = ref('');
    const {
      carState,
      expandedkeys,
      debounce
    } = useData();

    return {
      defaultProps,
      filterText,
      expandedkeys,
      carState,
      debounce
    };
  },
  computed: {
  },
  created() {
  },
  mounted() {
  },
  methods: {
    refreshTree() {
      this.refreshRightTree();
    },
    myRequire(str) {
      return new URL(`../../../assets/img/${str}`, import.meta.url).href
    },
    getNodeImg(data) {
      let imgHash = {
        0: "company",
        1: "department",
      }
      if (imgHash[data.type]) {
        return imgHash[data.type]
      }
    },
    getText(data) {
      return data.shortName ?? data.label ?? data.text
    },
    //过滤树节点
    filterNode(value, data) {
      if (!value) return true;
      return data[this.defaultProps.label].indexOf(value) !== -1;
    },
    getCheckedNodes() {
      return this.$refs.myTree.getCheckedNodes();
    },
    setCheckedKeys(carId) {
      let _this = this;
      _this.$refs.myTree.setCheckedKeys([carId]);
    },
    clearCheckedNode() {
      this.$refs.myTree.setCheckedKeys([])
    }
  },
  watch: {
    filterText(val) {
      let _this = this
      function myFun() {
        if (val.length >= 2 || !!!val) {
          _this.$refs.myTree.filter(val);
        }
      }
      _this.debounce(myFun);
    },
    treeList() {
      let _this = this;
      _this.$nextTick(() => {
        _this.$refs.myTree.filter(_this.filterText);
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  overflow: auto;
  margin-top: 10px;
  height: calc(100% - 42px);
}

:v-deep(.el-tree-node__content) {
  line-height: 26px;
}

.my-tree {
  font-size: 14px;
  height: 100%;

  .my-tree-node {
    display: flex;
    align-items: center;
    overflow: hidden;

    .node-text {
      margin-left: 5px;
    }

    .online {
      width: 6px;
      height: 6px;
      background: #11C79B;
      border-radius: 50%;
      margin-right: 3px;
      min-width: 6px;
    }

    .offline {
      width: 6px;
      height: 6px;
      background: #CDD3CF;
      border-radius: 50%;
      margin-right: 3px;
      min-width: 6px;
    }
  }

  div {
    display: inline-block;
  }

  img {
    position: relative;
    top: 1px;
    margin: 0 5px;
  }

  span div {
    position: relative;
    top: 3px;
    margin: 0 5px;
  }
}
</style>
